<template>
    <el-dialog title="绑定银行卡" :visible="visible" width="25%" center :show-close="false">
        <el-form label-position="right" ref="bindBankForm" label-width="100px" :model="formLabelAlign">
            <el-form-item prop="name" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]" label="电话号码">
                <el-input size="small" v-model="formLabelAlign.d" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item prop="name" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]" label="验证码">
                <el-input size="small" v-model="formLabelAlign.e" placeholder="请输入验证码">
                    <template slot="append"
                        ><div class="code-btn" @click="getCode">{{ second === 60 ? "获取验证码" : `${second}s` }}</div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="name" :rules="[{ required: true, message: '银行卡号', trigger: 'blur' }]" label="银行卡号">
                <el-input size="small" v-model="formLabelAlign.f" placeholder="请输入银行卡号"></el-input>
            </el-form-item>
            <el-form-item prop="name" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]" label="电话号码">
                <el-input size="small" v-model="formLabelAlign.h" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]" label="姓名">
                <el-input size="small" v-model="formLabelAlign.h" placeholder="请输入姓名"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancelModal">取 消</el-button>
            <el-button size="small" type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: Boolean
    },
    data() {
        return {
            formLabelAlign: {
                name: "",
                region: "",
                type: ""
            },
            loginLoading: false,
            second: 60
        };
    },
    methods: {
        getCode() {
            let init = 60;
            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
                init--;
                this.second = init;
                if (init === 0) {
                    this.second = 60;
                    this.timer && clearInterval(this.timer);
                    this.timer = null;
                }
            }, 1000);
        },
        save() {
            this.cancelModal();
        },
        cancelModal() {
            this.$emit("update:visible", false);
            this.$refs.bindBankForm.resetFields();
        }
    }
};
</script>

<style lang="scss" scoped></style>
